<template>
	<div>
		<h1>首页</h1>
		<!--  -->
		<ul class="index_h">
			<li>
				<p class="white">3562<label>单</label></p>
				<p class="gray">贷款中</p>
			</li>
			<li>
				<p class="white">35625<label>单</label></p>
				<p class="gray">贷款完成</p>
			</li>
			<li>
				<p class="white">2.6<label>W</label></p>
				<p class="gray">贷款总额</p>
			</li>
		</ul>
		<!--  -->
		<div class="index_m">
			<ul class="index_s">
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: orange;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe6cd;</i>
						<span style="display: block;margin-top: 0.15rem;">预约</span>
					</p>

				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: #0000EE;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe60f;</i>
						<span style="display: block;margin-top: 0.15rem;">客户</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: #00E0E0;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe611;</i>
						<span style="display: block;margin-top: 0.15rem;">网点</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: hotpink;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe620;</i>
						<span style="display: block;margin-top: 0.15rem;">项目</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: brown;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe635;</i>
						<span style="display: block;margin-top: 0.15rem;">评测</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: orangered;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe7cc;</i>
						<span style="display: block;margin-top: 0.15rem;">提成</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: #0000FF;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe65b;</i>
						<span style="display: block;margin-top: 0.15rem;">员工</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: coral;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe60f;</i>
						<span style="display: block;margin-top: 0.15rem;">用户</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: #0074D9;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe619;</i>
						<span style="display: block;margin-top: 0.15rem;">流程</span>
					</p>
				</li>
				<li>
					<p class="index_p">
						<i class="iconfont" style="background-color: chocolate;width: 0.7rem;height: 0.7rem;display: block;line-height: 0.7rem;border-radius: 45%;color: white;">&#xe66d;</i>
						<span style="display: block;margin-top: 0.15rem;">公司</span>
					</p>
				</li>
			</ul>
			<!--  -->
			<ul class="foot_6">
				<p class="foot_1"><i class="iconfont" style="color: orange !important;margin-right: 0.2rem;">&#xe691;</i><label>数据情况</label></p>
				<li>
					<label style="font-size: 0.25rem;">今日访客</label>
					<h3 style="margin: 0.1rem 0rem;">126人</h3>
					<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
						较昨日
						<span style="color: green;">
							<i class="iconfont">&#xe6c5;</i>
							5%
						</span>
					</p>
				</li>
				<li>
					<label style="font-size: 0.25rem;">今日测评</label>
					<h3 style="margin: 0.1rem 0rem;">126人</h3>
					<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
						较昨日
						<span style="color: red;">
							<i class="iconfont">&#xe6a5;</i>
							81%
						</span>
					</p>
				</li>
				<li>
					<label style="font-size: 0.25rem;">今日预约</label>
					<h3 style="margin: 0.1rem 0rem;">126人</h3>
					<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
						较昨日
						<span style="color: red;">
							<i class="iconfont">&#xe6a5;</i>
							0.9%
						</span>
					</p>
				</li>
				<li>
					<label style="font-size: 0.25rem;">新增贷款</label>
					<h3 style="margin: 0.1rem 0rem;">126人</h3>
					<p style="font-size: 0.02rem;color: gray;display: flex;align-items: center;">
						较昨日
						<span style="color: green;">
							<i class="iconfont">&#xe6c5;</i>
							20%
						</span>
					</p>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		name: "Header"
	}
</script>

<style scoped="scoped">
	h1 {
		width: 94%;
		margin: 10px auto;
	}

	.index_h {
		width: 94%;
		height: 1.9rem;
		margin: 0.26rem auto 0rem auto;
		background-color: #0080FF;
		border-top-left-radius: 0.16rem;
		border-top-right-radius: 0.16rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index_h>li {
		flex: 1;
		text-align: center;
	}

	.index_h>li .gray {
		color: lightgray;
		margin-top: 0.2rem;
	}

	.index_h>li .white {
		color: white;
		font-size: 0.38rem;
	}

	.index_h>li .white>label {
		font-size: 0.26rem;
	}

	/* 大的 */
	.index_m {
		width: 100%;
		height: 70vh;
		background-color: #F0F0F0;
		border-top-left-radius: 0.16rem;
		border-top-right-radius: 0.16rem;
	}

	/*  */
	.index_s {
		width: 94%;
		height: 3rem;
		margin: 0.3rem auto;
	}

	.index_s>li {
		width: 20%;
		height: 1.5rem;
		float: left;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/*  */
	.foot_6 {
		width: 6.4rem;
		height: 4.5rem;
		margin: 0.5rem auto 0.25rem auto;
		background-color: white;
		border-radius: 0.16rem;
	}

	.foot_6>li {
		width: 42%;
		height: 1.4rem;
		float: left;
		margin: 0.2rem 0.24rem;
	}
	
	.foot_1{
		padding: 0.2rem 0rem 0rem 0.24rem;
	}
</style>
